<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">心理急救</block>
		</custom-nav-sq-xcx>
		<view class="sqConBlock"></view>
		<view class="sqConWrap">
			<view class="gyTit">基本信息</view>
			<view class="bascInfo">
				<view class="infoFormItem">
					<view class="itemTit">姓名</view>
					<view class="itemCon">黄利峰</view>
				</view>
				<view class="infoFormItem">
					<view class="itemTit">性别</view>
					<view class="itemCon">男</view>
				</view>
				<view class="infoFormItem">
					<view class="itemTit">年龄</view>
					<view class="itemCon">30</view>
				</view>
				<view class="infoFormItem">
					<view class="itemTit">社区</view>
					<view class="itemCon">黄河路社区</view>
				</view>
				<view class="infoFormItem">
					<view class="itemTit">住址</view>
					<view class="itemCon">海斯顿公园</view>
				</view>
				<view class="infoFormItem">
					<view class="itemTit">联系方式</view>
					<view class="itemCon">
						<input class="itemConInp" type="tel" placeholder="请输入联系方式" maxlength="11" placeholder-style="color:#858494;"/>
					</view>
				</view>
			</view>
			<view class="gyTit harMargBot spaceBet alignCen">
				<view>通知形式</view>
				<view class="tagWrap">
					<view class="clearfix">
						<view class="sqTagItem"
							:class="[noticeIndex == index ? 'active' : '']"
							v-for="(item,index) in noticeArr"
							:key="index"
							@tap="switchNT(index,item.id)"
						>{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="gyTit">情况概述<text class="smNote">(仅文本通知形式下填写)</text></view>
			<view class="qkgs clearfix">
				<view class="sqTagItem"
					:class="[item.selFlag ? 'active' : '']"
					v-for="(item,index) in qkgsArr"
					:key="index"
					@tap="selectTag(item)"
				>{{item.name}}</view>
			</view>
			<view class="txtArea">
				<textarea class="area" placeholder="请输入详细描述(200字内)" maxlength="200"></textarea>
			</view>
			<view class="wjgyNote">注:每天最多可申请5次心理急救</view>
			<button class="comBtn wjgyBtn sq" @tap="goWjgy">{{btnTit}}</button>
		</view>
		<uni-popup type="center" ref="sqWjgyPop">
			<sq-wjgy-pop></sq-wjgy-pop>
		</uni-popup>
	</view>
</template>

<script>
	import SqWjgyPop from '../../index/components/SqWjgyPop.vue'
	export default {
		components:{
			SqWjgyPop
		},
		data(){
			return{
				noticeArr:[{id:1,name:'电话'},{id:2,name:'文本'}],
				noticeIndex:-1,
				qkgsArr:[{id:1,name:'暴躁',selFlag:false},{id:2,name:'情感',selFlag:false},{id:3,name:'自杀',selFlag:false}],
				qkgsIndex:-1,
				btnTit:'提交',
				wjgyIdArr:[],
				wjgyNameArr:[]
			}
		},
		methods:{
			goWjgy(){
				this.$refs.sqWjgyPop.open();
			},
			switchNT(index,id){
				this.noticeIndex = index;
				this.noticeVal = id;
				this.btnTit = index == 0 ? '拨打电话' : '提交';
			},
			selectTag(item){
				if(item.selFlag){
					this.$set(item,'selFlag',false);
					for(var i=0;i<this.wjgyIdArr.length;i++){
						if(item.id == this.wjgyIdArr[i]){
							this.wjgyIdArr.splice(i,1);
							this.wjgyNameArr.splice(i,1);
						}
					}
				}else if(item.selFlag == false){
					this.$set(item,'selFlag',true)
					this.wjgyIdArr.push(item.id);
					this.wjgyNameArr.push(item.tagName);
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $sq-fuf;
	}
	.wjgyNote{
		font-size: 24rpx;
		padding: 15rpx 0;
		color: $pss-sq-red;
	}
	.wjgyBtn{
		border-radius: 20rpx;
		margin-top: 50rpx;
	}
	.gyTit{
		font-size: 30rpx;
		color: $sq-main0;
		font-weight: 600;
		margin-bottom: 20rpx;
		.smNote{
			font-size: 24rpx;
			margin-left: 10rpx;
			font-weight: normal;
			color: $sq-main8;
		}
		&.harMargBot{
			margin-bottom: 60rpx;
		}
	}
	.bascInfo{
		margin-bottom: 50rpx;
	}
	.infoFormItem{
		height: 80rpx;
		display: flex;
		font-size: 28rpx;
		color: $sq-main0;
		margin-bottom: 20rpx;
		.itemTit{
			width: 130rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
		}
		.itemCon{
			border: 2rpx solid #EFEEFC;
			flex: 1;
			background: #fff;
			border-radius: 16rpx;
			padding: 0 15rpx;
			line-height: 80rpx;
			.itemConInp{
				height: 100%;
			}
		}
	}
	.sqTagItem{
		width: 140rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		float: left;
		color: $sq-main8;
		font-size: 26rpx;
		margin:0 20rpx 0rpx 0;
		border-radius: 10rpx;
		position: relative;
		background: $sq-fue;
		font-weight: normal;
		&.active{
			color: $pss-sq-main;
			font-weight: 600;
		}
	}
	.txtArea{
		margin-top: 30rpx;
		background: #fff;
		height: 260rpx;
		border-radius: 10rpx;
		.area{
			width: 96%;
			padding: 15rpx 2%;
			height: 230rpx;
			font-size: 28rpx;
			color: $sq-main0;
		}
	}
</style>